<template>
    <div class="two">
        <!-- <div class="header-select">
            <el-select v-model="value" placeholder="请选择" size="mini" @change="changeNum">
                <el-option v-for="item in yearly" :key="item" :label="item" :value="item">
                </el-option>
            </el-select>
        </div> -->
        <div id="main2">
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                value: '',
                yearly: [],
                countrylist: [],
                isLoading: false,
                dateboundlist: {}, //时间为key
                myChart: null,
            }
        },
        mounted() {
            this.getDataDraw();
        },
        methods: {
            //请求数据
            getDataDraw() {
                this.isLoading = true;
                this.$store.dispatch("ajaxApi", {
                    // this.$store.dispatch("ajax", {
                    url: `/zonghe/api/algor?name.equals=GDP排行&sort=add_time,desc&size=1`,
                    method: "get",
                    succeed: (res) => {
                        console.log(res);
                        let data = JSON.parse(res[0].outputs)
                        let forecast = data.forecast;
                        let original = data.original;
                        console.log(original);
                     for (let key in original) {
                            if (this.yearly.length == 0) {
                                for (let item of original[key]) {
                                    this.yearly.push(item.x);
                                    this.yearly.sort();
                                }
                            }
                            for (let a of original[key]) {
                                let obj = {};
                                obj.name = key;
                                obj.value = a.y;
                                if (!this.dateboundlist[a.x]) {
                                    this.dateboundlist[a.x] = []
                                }
                                this.dateboundlist[a.x].push(obj);
                            }
                        }
                         this.yearly.push(Number(this.yearly[this.yearly.length-1])+1);
                        this.dateboundlist[this.yearly[this.yearly.length-1]]=[];
                               for (let i in forecast) {
                                let small = {};
                                small.name = i;
                                small.value = forecast[i][0].y;
                                this.dateboundlist[this.yearly[this.yearly.length-1]].push(small);
                        }
                        this.value = this.yearly[0]
                        this.initCharts(this.dateboundlist[this.value]);
                    },
                    errored: (err) => {
                        // console.log(err);
                        if (err.response) {
                            this.islistLoad = false;
                            this.modelsData = [];
                        }
                    }
                });
            },
            initCharts(seconddata) {
                console.log(seconddata);
                this.$emit('changeNum','two',{arr: this.yearly,value: this.value})
             let namelist = [];
                let dataArray = [];
                for (let item of seconddata) {
                    namelist.push(item.name);
                    dataArray.push(item.value)
                }
                var chartDom = document.getElementById('main2');
                this.myChart = echarts.init(chartDom);
                var option;
                option = {
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#fff'
                    }
                    }
                    },
                      legend: {
                        data: namelist,
                             textStyle: {
            color: '#fff'
          },
              top: '5%',
                        left: '2%',
                        orient: 'vertical',
                    },
                    textStyle: {
                        color: '#fff'
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        top: '3%',
                        bottom: '0%',
                        containLabel: true
                    },
                     yAxis: {
                           type: 'value'
                    },
                    xAxis: {
                            type: 'category',
                            data: namelist
                    },
                    series: [{
                            data: dataArray,
                            type: 'line',
                            smooth: false
                            }
                     
                       ]
                };

                option && this.myChart.setOption(option);
                                                          window.addEventListener('resize', () => {
                // 自动渲染echarts
                this.myChart.resize();
      })
            },
            //切换数据
            changeNum(val) {
                var option = this.myChart.getOption();
                option.series[0].data = this.dateboundlist[val];
                this.myChart.setOption(option);
            }
        }
    }
</script>

<style scoped>
    .two {
        width: 100%;
        height: 100%;
    }

    .header-select {
        width: 100%;
        height: 30px;
        text-align: center;
    }

    #main2 {
        width: 100%;
        height: 100%;
        /* height: calc(100% - 50px); */
    }
</style>